import {Button, DatePicker, Input, NavBar} from 'antd-mobile'
import Icon from '@/components/Icon'
import './index.scss'
import classNames from 'classnames'
import {billListData} from '@/constant'
import {useNavigate} from 'react-router-dom'
import {useState} from "react";
import {addBillAsync} from "@/store/modules/billStore";
import {useDispatch} from "react-redux";

const New = () => {
    // 1. 区分账单状态
    const [billType, setBillType] = useState('income')
    // 控制时间显隐
    const [visible, setVisible] = useState(false)
    //收集金额
    const [money, setMoney] = useState(0)
    const changeMoney = (value) => {
        setMoney(Number(value))
    }
    //收集账单类型
    const [useFor, setUseFor] = useState('')
    // dispatch 是通过 useDispatch 钩子从 react-redux 中获取的。它的主要作用是触发 Redux 的 action
    const dispatch = useDispatch();
    //表单输入日期
    const [currentDate, setCurrentDate] = useState(new Date())
    const saveBill = () => {
        //收集表单信息
        const data = {
            type: billType,
            money: billType === 'income' ? money : -money,
            date: currentDate,
            useFor: useFor
        }
        console.log('保存账单', data)
        // 调用 dispatch 函数,将 action 传递给 Redux store
        dispatch(addBillAsync(data))
    }
    const confirm = (value) => {
        setVisible(false)
        setCurrentDate(value)
    }
    //路由切换
    const navigate = useNavigate()
    return (
        <div className="keepAccounts">
            <NavBar className="nav" onBack={() => navigate(-1)}>
                记一笔
            </NavBar>

            <div className="header">
                <div className="kaType">
                    <Button
                        shape="rounded"
                        className={classNames('', billType === 'pay' ? 'selected' : '')}
                        onClick={() => setBillType('pay')}
                    >
                        支出
                    </Button>
                    <Button
                        className={classNames('income', billType === 'income' ? 'selected' : '')}
                        shape="rounded"
                        onClick={() => setBillType('income')}
                    >
                        收入
                    </Button>
                </div>

                <div className="kaFormWrapper">
                    <div className="kaForm">
                        <div className="date">
                            <Icon type="calendar" className="icon"/>
                            <span className="text"
                                  onClick={() => setVisible(!visible)}>{currentDate.toLocaleDateString()}</span>
                            <DatePicker
                                className="kaDate"
                                title="记账日期"
                                max={new Date()}
                                visible={visible}
                                onClose={() => setVisible(false)}
                                onConfirm={confirm}
                            />
                        </div>
                        <div className="kaInput">
                            <Input
                                className="input"
                                placeholder="0.00"
                                type="number"
                                value={money}
                                onChange={changeMoney}
                            />
                            <span className="iconYuan">¥</span>
                        </div>
                    </div>
                </div>
            </div>

            <div className="kaTypeList">
                {billListData[billType].map(item => {
                    return (
                        <div className="kaType" key={item.type}>
                            <div className="title">{item.name}</div>
                            <div className="list">
                                {item.list.map(item => {
                                    return (
                                        <div
                                            className={classNames(
                                                'item',
                                                useFor === item.type && 'selected'
                                            )}
                                            key={item.type}
                                            onClick={() => setUseFor(item.type)}

                                        >
                                            <div className="icon">
                                                <Icon type={item.type}/>
                                            </div>
                                            <div className="text">{item.name}</div>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                    )
                })}
            </div>

            <div className="btns">
                <Button className="btn save" onClick={() => {
                    navigate('/month')
                }}>
                    月度账单
                </Button>
                <Button className="btn save" onClick={saveBill}>
                    保 存
                </Button>
            </div>
        </div>
    )
}

export default New
